<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单统计</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <style>
        .layui-btn-group .layui-btn{
            padding: 0px 10px;
            height: 35px;
            line-height: 35px;
            font-size: 15px; }
        .layui-btn-cur{ background-color: #009688; color: #fff;}
        .layui-table-body .layui-table-cell {
            height: 90px; line-height: 90px;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">

        {neq name="role_name" value="channel"}
        <div lay-filter="listSearch" class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">

                <div class="layui-inline">
                    <select name="channel_id" lay-search>
                        <option value="0">请选择投放号</option>
                        {volist name="channels" id="v"}
                        <option value="{$v.id}">{$v.account}</option>
                        {/volist}
                    </select>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-list-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>

        </div>
        {/neq}


        <div class="layui-card-body">

            <div class="layui-fluid" style="padding: 15px 0">

                <div class="layui-row layui-col-space15">

                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card layuiadmin-card-text summary-data-today" style="padding: 0">
                            <div class="layui-card-header">
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                    今日充值
                                </div>
                                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                    昨日此时
                                </div>
                            </div>
                            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 0;padding-bottom: 10px;">
                                <div>
                                    <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                        <p style="color: #0404d2;font-size: 24px;" class="money">0</p>
                                    </div>
                                    <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                        <p style="color: #0404d2;font-size: 24px;" class="yesterday_money">0</p>
                                    </div>
                                </div>
                                <div>
                                    <div style="float: left;width: 50%">
                                        <p>非VIP充值</p>
                                        <p style="color: #0404d2;" class="non_vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="non_vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="non_vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="non_vip_rate">0%</span></p>
                                    </div>
                                    <div style="float: right;width: 50%">
                                        <p>VIP充值</p>
                                        <p style="color: #0404d2;" class="vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="vip_rate">0%</span></p>
                                    </div>
                                </div>
                                <div style="clear: both"></div>

                                <div style="border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;overflow: hidden;">
                                    <p style="float: right;width: 50%">普通充值：<span style="color: red" class="ordinary_recharge_money">0</span></p>
                                    <p style="float: right;width: 50%">活动充值：<span style="color: red" class="activity_recharge_money">0</span></p>
                                </div>
                                <div style="border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;">
                                    <p>
                                        新用户充值
                                        <span class="layuiadmin-span-color today_zc">0</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card layuiadmin-card-text summary-data-yesterday" style="padding: 0">
                            <div class="layui-card-header">
                                昨日充值
                            </div>
                            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 0;padding-bottom: 10px;">
                                <p style="color: #0404d2;font-size: 24px;" class="money">0</p>
                                <div>
                                    <div style="float: left;width: 50%">
                                        <p>非VIP充值</p>
                                        <p style="color: #0404d2;" class="non_vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="non_vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="non_vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="non_vip_rate">0%</span></p>
                                    </div>
                                    <div style="float: right;width: 50%">
                                        <p>VIP充值</p>
                                        <p style="color: #0404d2;" class="vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="vip_rate">0%</span></p>
                                    </div>
                                </div>
                                <div style="clear: both"></div>

                                <div style="border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;overflow: hidden; ">
                                    <p style="float: right;width: 50%">普通充值：<span style="color: red" class="ordinary_recharge_money">0</span></p>
                                    <p style="float: right;width: 50%">活动充值：<span style="color: red" class="activity_recharge_money">0</span></p>
                                </div>
                                <div style="border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;">
                                    <p>
                                        新用户充值
                                        <span class="layuiadmin-span-color yesterday_zc">0</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card layuiadmin-card-text summary-data-month" style="padding: 0">
                            <div class="layui-card-header">
                                本月充值（不包含今日）
                            </div>
                            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 0;padding-bottom: 10px;">
                                <p style="color: #0404d2;font-size: 24px;" class="money">0</p>
                                <div>
                                    <div style="float: left;width: 50%">
                                        <p>非VIP充值</p>
                                        <p style="color: #0404d2;" class="non_vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="non_vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="non_vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="non_vip_rate">0%</span></p>
                                    </div>
                                    <div style="float: right;width: 50%">
                                        <p>VIP充值</p>
                                        <p style="color: #0404d2;" class="vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="vip_rate">0%</span></p>
                                    </div>
                                </div>
                                <div style="clear: both"></div>

                                <div style="border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;overflow: hidden; ">
                                    <p style="float: right;width: 50%">普通充值：<span style="color: red" class="ordinary_recharge_money">0</span></p>
                                    <p style="float: right;width: 50%">活动充值：<span style="color: red" class="activity_recharge_money">0</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6 layui-col-md3">
                        <div class="layui-card layuiadmin-card-text summary-data-total" style="padding: 0">
                            <div class="layui-card-header">
                                累计充值（不包含今日）
                            </div>
                            <div class="layui-card-body layuiadmin-card-list" style="padding-top: 0;padding-bottom: 10px;">
                                <p style="color: #0404d2;font-size: 24px;" class="money">0</p>
                                <div>
                                    <div style="float: left;width: 50%">
                                        <p>非VIP充值</p>
                                        <p style="color: #0404d2;" class="non_vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="non_vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="non_vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="non_vip_rate">0%</span></p>
                                    </div>
                                    <div style="float: right;width: 50%">
                                        <p>VIP充值</p>
                                        <p style="color: #0404d2;" class="vip_money">0</p>
                                        <p>已支付：<span style="color: red" class="vip_paid_num">0</span> 笔</p>
                                        <p>未支付：<span style="color: red" class="vip_unpaid_num">0</span> 笔</p>
                                        <p>完成率：<span style="color: red" class="vip_rate">0%</span></p>
                                    </div>
                                </div>
                                <div style="clear: both"></div>

                                <div style="border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;overflow: hidden; ">
                                    <p style="float: right;width: 50%">普通充值：<span style="color: red" class="ordinary_recharge_money">0</span></p>
                                    <p style="float: right;width: 50%">活动充值：<span style="color: red" class="activity_recharge_money">0</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <table id="LAY-list-manage" lay-filter="LAY-list-manage"></table>

            <script type="text/html" id="moneyTpl">
                <div style="line-height: 43px;">
                    <p> ￥{{ d.money }}</p>
                    <p>新用户充值：￥{{ d.new_zc_money }}</p>
                </div>
            </script>

            <script type="text/html" id="OverviewTpl">
                <p style="line-height: 45px;word-wrap: break-word;">
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">普通充值：￥{{ d.ordinary_recharge_money }}</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">活动充值：￥{{ d.activity_recharge_money }}</span>
                </p>
            </script>

            <script type="text/html" id="NonVipTpl">
                <p style="line-height: 30px;word-wrap: break-word;">
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">￥{{ d.non_vip_money }}</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">充值人数：{{ d.non_vip_user_num }}</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">人均：￥{{ d.non_vip_money_avg }}</span>
                </p>
            </script>

            <script type="text/html" id="NonVipOrderTpl">
                <p style="line-height: 30px;word-wrap: break-word;">
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">{{ d.non_vip_paid_num }}笔</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">{{ d.non_vip_unpaid_num }}笔未支付</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">完成率：{{ d.non_vip_rate }}%</span>
                </p>
            </script>

            <script type="text/html" id="VipTpl">
                <p style="line-height: 30px;word-wrap: break-word;">
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">￥{{ d.vip_money }}</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">充值人数：{{ d.vip_user_num }}</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">人均：￥{{ d.vip_money_avg }}</span>
                </p>
            </script>

            <script type="text/html" id="VipOrderTpl">
                <p style="line-height: 30px;word-wrap: break-word;">
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">{{ d.vip_paid_num }}笔</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">{{ d.vip_unpaid_num }}笔未支付</span>
                    <br>
                    <span style="text-align: left;white-space: initial;width: 100%;display:inline-block">完成率：{{ d.vip_rate }}%</span>
                </p>
            </script>

        </div>
    </div>
</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','admin'], function(){
        var $ = layui.$
            ,form = layui.form
            ,admin = layui.admin
            ,table = layui.table;

        //监听搜索
        form.on('submit(LAY-list-front-search)', function(data){
            var field = data.field;

            //执行重载
            //执行重载
            table.reload('LAY-list-manage', {
                where: field
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        form.on('submit(LAY-reset)', function(data){
            var field = data.field;
            form.val("listSearch", {
                "channel_id": "0",
            });

            form.render();

            table.reload('LAY-list-manage', {
                where: {"channel_id": "0"}
                ,page: {
                    curr: 1  // 将页码重置为第一页
                }
            });
        });

        table.render({
            elem: '#LAY-list-manage'
            , url: "{:url('AdvertStatistics/order_summary_data')}" //模拟接口
            , response: {
                statusCode: 1 //规定成功的状态码，本来是：0，现在统一改为1
            }
            , page: true //开启分页
            , limit: 20
            , cols: [[
                {field: 'create_date', title: '日期',align: 'left'}
                , {field: '', title: '充值金额',align: 'left',templet: '#moneyTpl'}
                , {field: '', title: '充值概况',align: 'left',templet: '#OverviewTpl',}
                , {field: '', title: '非VIP充值',align: 'left',templet: '#NonVipTpl',}
                , {field: '', title: '非VIP支付订单数',align: 'left',templet: '#NonVipOrderTpl'}
                , {field: '', title: 'VIP充值',align: 'left',templet: '#VipTpl'}
                , {field: '', title: 'VIP充值订单数',align: 'left',templet: '#VipOrderTpl'}
            ]]
            ,done: function(res, curr, count){

                $('.summary-data-today .money').html(res.summary.today.money);
                $('.summary-data-today .yesterday_money').html(res.summary.yesterday.yesterday_money);
                $('.summary-data-today .non_vip_money').html(res.summary.today.non_vip_money);
                $('.summary-data-today .vip_money').html(res.summary.today.vip_money);
                $('.summary-data-today .ordinary_recharge_money').html(res.summary.today.ordinary_recharge_money);
                $('.summary-data-today .activity_recharge_money').html(res.summary.today.activity_recharge_money);
                $('.summary-data-today .vip_paid_num').html(res.summary.today.vip_paid_num);
                $('.summary-data-today .vip_unpaid_num').html(res.summary.today.vip_unpaid_num);
                $('.summary-data-today .vip_rate').html(res.summary.today.vip_rate+'%');
                $('.summary-data-today .non_vip_paid_num').html(res.summary.today.non_vip_paid_num);
                $('.summary-data-today .non_vip_unpaid_num').html(res.summary.today.non_vip_unpaid_num);
                $('.summary-data-today .non_vip_rate').html(res.summary.today.non_vip_rate+'%');
                $('.summary-data-today .today_zc').html(res.summary.today.new_zc_money);


                $('.summary-data-yesterday .money').html(res.summary.yesterday.money);
                $('.summary-data-yesterday .non_vip_money').html(res.summary.yesterday.non_vip_money);
                $('.summary-data-yesterday .vip_money').html(res.summary.yesterday.vip_money);
                $('.summary-data-yesterday .ordinary_recharge_money').html(res.summary.yesterday.ordinary_recharge_money);
                $('.summary-data-yesterday .activity_recharge_money').html(res.summary.yesterday.activity_recharge_money);
                $('.summary-data-yesterday .vip_paid_num').html(res.summary.yesterday.vip_paid_num);
                $('.summary-data-yesterday .vip_unpaid_num').html(res.summary.yesterday.vip_unpaid_num);
                $('.summary-data-yesterday .vip_rate').html(res.summary.yesterday.vip_rate+'%');
                $('.summary-data-yesterday .non_vip_paid_num').html(res.summary.yesterday.non_vip_paid_num);
                $('.summary-data-yesterday .non_vip_unpaid_num').html(res.summary.yesterday.non_vip_unpaid_num);
                $('.summary-data-yesterday .non_vip_rate').html(res.summary.yesterday.non_vip_rate+'%');
                $('.summary-data-yesterday .yesterday_zc').html(res.summary.yesterday.new_zc_money);

                $('.summary-data-month .money').html(res.summary.month.money);
                $('.summary-data-month .non_vip_money').html(res.summary.month.non_vip_money);
                $('.summary-data-month .vip_money').html(res.summary.month.vip_money);
                $('.summary-data-month .ordinary_recharge_money').html(res.summary.month.ordinary_recharge_money);
                $('.summary-data-month .activity_recharge_money').html(res.summary.month.activity_recharge_money);
                $('.summary-data-month .vip_paid_num').html(res.summary.month.vip_paid_num);
                $('.summary-data-month .vip_unpaid_num').html(res.summary.month.vip_unpaid_num);
                $('.summary-data-month .vip_rate').html(res.summary.month.vip_rate+'%');
                $('.summary-data-month .non_vip_paid_num').html(res.summary.month.non_vip_paid_num);
                $('.summary-data-month .non_vip_unpaid_num').html(res.summary.month.non_vip_unpaid_num);
                $('.summary-data-month .non_vip_rate').html(res.summary.month.non_vip_rate+'%');

                $('.summary-data-total .money').html(res.summary.total.money);
                $('.summary-data-total .non_vip_money').html(res.summary.total.non_vip_money);
                $('.summary-data-total .vip_money').html(res.summary.total.vip_money);
                $('.summary-data-total .ordinary_recharge_money').html(res.summary.total.ordinary_recharge_money);
                $('.summary-data-total .activity_recharge_money').html(res.summary.total.activity_recharge_money);
                $('.summary-data-total .vip_paid_num').html(res.summary.total.vip_paid_num);
                $('.summary-data-total .vip_unpaid_num').html(res.summary.total.vip_unpaid_num);
                $('.summary-data-total .vip_rate').html(res.summary.total.vip_rate+'%');
                $('.summary-data-total .non_vip_paid_num').html(res.summary.total.non_vip_paid_num);
                $('.summary-data-total .non_vip_unpaid_num').html(res.summary.total.non_vip_unpaid_num);
                $('.summary-data-total .non_vip_rate').html(res.summary.total.non_vip_rate+'%');
            }
        });

    });
</script>
</body>
</html>